<template>
  <div>
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item v-bind="formItemLayout" label="公司名称">
        <a-input
          disabled
          v-decorator="[
            'company_name',
            {
              initialValue: formData.company_name
            }
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="公司简介">
        <a-textarea
          disabled
          v-decorator="[
            'company_intro',
            {
              initialValue: formData.company_intro
            }
          ]"
        ></a-textarea>
      </a-form-item>
      <a-form-item
        v-bind="formItemLayout"
        label="营业执照"
        extra="支持格式：jpg"
      >
        <a-upload
          v-decorator="[
            'business_license',
            {
              initialValue: formData.businessLicense,
              valuePropName: 'fileList',
              getValueFromEvent: normFile,
              rules: [{ required: true, message: '请上传营业执照' }]
            }
          ]"
          name="file"
          :headers="headers"
          accept=".jpg"
          :action="$api.companyUpload"
          list-type="picture"
        >
          <a-button> <a-icon type="upload" /> 上传营业执照 </a-button>
        </a-upload>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="统一社会信用号码">
        <a-input
          v-decorator="[
            'unicredit',
            {
              initialValue: formData.unicredit,
              rules: [{ required: true, message: '请输入统一社会信用号码' }]
            }
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="法人姓名">
        <a-input
          v-decorator="[
            'legal_person',
            {
              initialValue: formData.legal_person,
              rules: [{ required: true, message: '请输入法人姓名' }]
            }
          ]"
        />
      </a-form-item>
      <a-form-item
        v-bind="formItemLayout"
        label="法人身份证照片"
        :required="true"
      >
        <a-row>
          <a-col :span="12">
            <a-form-item extra="支持格式：jpg">
              <a-upload
                v-decorator="[
                  'legal_person_id_front',
                  {
                    initialValue: formData.legalPersonIdFront,
                    valuePropName: 'fileList',
                    getValueFromEvent: normFile,
                    rules: [{ required: true, message: '请上传正面' }]
                  }
                ]"
                name="file"
                :headers="headers"
                accept=".jpg"
                :action="$api.companyUpload"
                list-type="picture"
              >
                <a-button> <a-icon type="upload" /> 上传正面 </a-button>
              </a-upload>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item extra="支持格式：jpg">
              <a-upload
                v-decorator="[
                  'legal_person_id_back',
                  {
                    initialValue: formData.legalPersonIdBack,
                    valuePropName: 'fileList',
                    getValueFromEvent: normFile,
                    rules: [{ required: true, message: '请上传营业执照' }]
                  }
                ]"
                name="file"
                :headers="headers"
                accept=".jpg"
                :action="$api.companyUpload"
                list-type="picture"
              >
                <a-button> <a-icon type="upload" /> 上传反面 </a-button>
              </a-upload>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="身份证">
        <a-input
          v-decorator="[
            'legal_person_id_card',
            {
              initialValue: formData.legal_person_id_card,
              rules: [
                { required: true, message: '请输入身份证' },
                { validator: validateIdCard }
              ]
            }
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="法人手机号">
        <a-input
          disabled
          v-decorator="[
            'mobile',
            {
              initialValue: formData.mobile
            }
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="基本户账号">
        <a-input
          v-decorator="[
            'base_count',
            {
              initialValue: formData.base_count,
              rules: [{ required: true, message: '请输入基本户账号' }]
            }
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="基本户开户行" v-if="showBank">
        <span slot="extra"
          >若基本户开户行不在该选择范围内,请点击
          <a href="javaScript:(0)" @click="changeBankFormStatus(false)"
            >这里</a
          ></span
        >
        <a-select
          v-decorator="[
            'base_bank_name',
            {
              initialValue: formData.base_bank_name,
              rules: [{ required: true, message: '请选择基本户开户行' }]
            }
          ]"
        >
          <a-select-option
            v-for="(item, index) in bankList"
            :key="index"
            :value="item.name"
          >
            <span style="display: inline-block;width: 30px;">
              <img
                width="20px"
                :src="item.img"
                alt=""
                style="vertical-align: middle"
              />
            </span>
            {{ item.name }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item
        v-bind="formItemLayout"
        label="基本户开户行"
        v-if="!showBank"
      >
        <span slot="extra"
          >点击<a href="javaScript:(0)" @click="changeBankFormStatus(true)">
            返回 </a
          >选择基本户开户行</span
        >
        <a-input
          v-decorator="[
            'parentBankName',
            {
              initialValue: formData.parentBankName,
              rules: [{ required: true, message: '请输入基本户开户行' }]
            }
          ]"
        />
      </a-form-item>
      <a-form-item
        v-bind="formItemLayout"
        label="开户行支行名称"
      >
        <a-input
          v-decorator="[
            'bankName',
            {
              initialValue: formData.bankName,
              rules: [{ required: true, message: '请输入开户行支行名称' }]
            }
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="开户行支付行号">
        <a-input
          v-decorator="[
            'unionBank',
            {
              initialValue: formData.unionBank,
              rules: [
                { required: true, message: '请输入开户行支付行号' },
                {
                  validator: validateHangHao
                }
              ]
            }
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="开户行省份">
        <a-cascader
          :options="cityListFormat"
          placeholder="请输入开户行省份/城市"
          v-decorator="[
            'provinceList',
            {
              initialValue: formData.provinceList
            }
          ]"
        />
      </a-form-item>
      <a-form-item
        v-bind="formItemLayout"
        label="对公户开户许可证"
        extra="支持格式：jpg"
      >
        <a-upload
          v-decorator="[
            'company_count',
            {
              initialValue: formData.companyCount,
              valuePropName: 'fileList',
              getValueFromEvent: normFile,
              rules: [{ required: true, message: '请上传图片' }]
            }
          ]"
          :headers="headers"
          accept=".jpg"
          name="file"
          :action="$api.companyUpload"
          list-type="picture"
        >
          <a-button> <a-icon type="upload" /> 上传图片 </a-button>
        </a-upload>
      </a-form-item>
      <a-form-item style="text-align: center">
        <a-button
          type="primary"
          class="submit-btn"
          html-type="submit"
          size="large"
        >
          提交审核
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { Upload, Row, Col, Cascader } from "ant-design-vue";
import bankList from "@/lib/connectBank";
import cityList from "@/lib/city";
import "@/assets/fonticon/iconfont.css";
export default {
  components: {
    aUpload: Upload,
    aRow: Row,
    aCol: Col,
    aCascader: Cascader
  },
  data() {
    return {
      bankList,
      cityList,
      autoCompleteResult: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      },
      formData: {
        parentBankName: "",
        bankName: "",
        unionBank: "",
        province: "",
        city: "",
        provinceList: [],
        unicredit: "",
        company_name: "",
        company_intro: "",
        mobile: "",
        base_bank_name: "",
        base_count: "",
        legal_person: "",
        legal_person_id_card: "",
        businessLicense: [],
        legalPersonIdFront: [],
        legalPersonIdBack: [],
        companyCount: []
      },
      headers: {
        token: this.$crypto.getAES(localStorage.getItem("ctoken"))
      },
      showBank: true,
      cityListFormat: []
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  methods: {
    changeBankFormStatus(status) {
      this.showBank = status;
    },
    validateIdCard(rule, value, callback) {
      let cP = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      if (value && !cP.test(value)) {
        callback("请输入正确的身份证号");
      } else {
        callback();
      }
    },
    validateHangHao(rule, value, callback) {
      let cP = /^[0-9]{12}$/;
      if (value && !cP.test(value)) {
        callback("请输入12位数的支付行号");
      } else {
        callback();
      }
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          let obj = JSON.parse(JSON.stringify(values));
          obj.business_license = obj.business_license[0].response.data.fileName;
          obj.legal_person_id_front =
            obj.legal_person_id_front[0].response.data.fileName;
          obj.legal_person_id_back =
            obj.legal_person_id_back[0].response.data.fileName;
          obj.company_count = obj.company_count[0].response.data.fileName;
          delete obj.mobile;
          obj.province = obj.provinceList[0];
          obj.city = obj.provinceList[1];
          delete obj.provinceList;
            obj.base_bank_name = obj.parentBankName;
            delete obj.parentBankName;
          this.$ajax
            .post(this.$api.submitCompanyInfo, obj)
            .then(() => {
              this.$message.success("提交成功");
              this.$router.push({ name: "companyInfo" });
            })
            .catch(err => {
              this.$message.error(err);
            });
        }
      });
    },
    getInfo() {
      this.$ajax
        .post(this.$api.getCompanyList)
        .then(res => {
          if (
            res.data.status === 1 ||
            res.data.status === 2 ||
            res.data.status === 5
          ) {
            this.$message.warning("您的企业资料不能进行修改!");
            this.$router.push({ name: "companyInfo" });
          }
          Object.assign(this.formData, res.data);
          if (res.data.province) {
            this.formData.provinceList.push(res.data.province);
            this.formData.provinceList.push(res.data.city);
          }
          this.formData.parentBankName = res.data.base_bank_name;
          if (res.data.business_license) {
            this.formData.businessLicense.push({
              uid: "1",
              name: "营业执照.jpg",
              status: "done",
              url: this.$api.imgUserUrl + res.data.business_license,
              response: {
                data: {
                  fileName: res.data.origin_business_license
                }
              }
            });
          }
          if (res.data.legal_person_id_front) {
            this.formData.legalPersonIdFront.push({
              uid: "2",
              name: "身份证正面照.jpg",
              status: "done",
              url: this.$api.imgUserUrl + res.data.legal_person_id_front,
              response: {
                data: {
                  fileName: res.data.origin_legal_person_id_front
                }
              }
            });
          }
          if (res.data.legal_person_id_back) {
            this.formData.legalPersonIdBack.push({
              uid: "3",
              name: "身份证背面照.jpg",
              status: "done",
              url: this.$api.imgUserUrl + res.data.legal_person_id_back,
              response: {
                data: {
                  fileName: res.data.origin_legal_person_id_back
                }
              }
            });
          }
          if (res.data.company_count) {
            this.formData.companyCount.push({
              uid: "4",
              name: "对公户开户许可证.jpg",
              status: "done",
              url: this.$api.imgUserUrl + res.data.company_count,
              response: {
                data: {
                  fileName: res.data.origin_company_count
                }
              }
            });
          }
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    normFile(e) {
      if (Array.isArray(e)) {
        return e;
      }
      if (e.fileList.length === 2) {
        e.fileList.splice(0, 1);
      }
      return e && e.fileList;
    },
    format() {
      this.cityListFormat = [];
      for (let key in this.cityList) {
        let obj = {};
        obj.value = key;
        obj.label = key;
        obj.children = [];
        this.cityList[key].forEach(item => {
          let chObj = {};
          chObj.value = item;
          chObj.label = item;
          obj.children.push(chObj);
        });
        this.cityListFormat.push(obj);
      }
    }
  },
  created() {
    this.format();
    this.getInfo();
  }
};
</script>

<style scoped lang="less">
.iconfont {
  font-size: 20px;
}
</style>
